<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 实测实量编辑页 -->
    <a-spin
      id="base-breadcrumb"
      :spinning="loading"
      style="position: relative"
    >
      <!-- 基础信息 -->
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <base-info
          :form="form"
          edit-model="0"
          isValidate
          :isNoBorder="true"
          class="requiredFormItem"
        />
        <!-- 测量信息 -->
        <a-card
          :bordered="false"
          class="mb20"
        >
          <title-name title="测量信息" />
          <custom-form
            :form="form"
            :form-list="formList"
            edit-model="V"
          />
        </a-card>
      </a-form-model>

      <!-- 表格 -->
      <a-card
        :bordered="false"
        style="margin-bottom: 50px"
      >
        <title-name title="检查项信息" />
        <div id="tableBox">
          <s-table
            ref="table"
            table-layout="fixed"
            size="default"
            row-key="id"
            :columns="columns"
            :data="loadData"
            :show-pagination="false"
          >
            <!-- 表格行操作栏 -->
            <template
              slot="action"
              slot-scope="text, record"
            >
              <a-form-model
                v-if="editModel == 1"
                ref="ruleForm"
                :model="record"
                :rules="rules"
              >
                <a-form-model-item
                  prop="measuringValue"
                  style="margin: 0"
                >
                  <BaseInput
                    v-model="record.measuringValue"
                    :max-length="30"
                    placeholder="请输入"
                  />
                </a-form-model-item>
              </a-form-model>
              <span v-else>{{ record.measuringValue || '无' }}</span>
            </template>
          </s-table>
        </div>
      </a-card>
    </a-spin>
    <!-- 页脚操作栏 -->
    <div
      class="btn_box page-btn-right-top"
    >
      <!-- <BasePrintButton v-if="editModel == 2" :beforePrintFn="() => getPritContent('CSCEC8XN-EQ-B30612')" class="button_right" /> -->
      <a-button
        v-if="editModel != 2"
        :loading="loading"
        type="primary"
        class="button_right"
        @click="handleSubmit"
      >
        提交
      </a-button>
      <a-button
        type="primary"
        @click="$multiTab.close()"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { table } from '@/api/quality/reality' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BaseInfo from '@/components/businessComponents/BaseInfo' // 基础信息
// import BasePrintButton from '@/components/BasePrintButton' // 打印按钮

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: '80px',
    customRender(text, record, index) {
      return index + 1
    },
  },
  {
    title: '检查项名称',
    dataIndex: 'checkItemName',
    width: '230px',
  },
  {
    title: '测量结果',
    dataIndex: 'measuringResult',
    width: '130px',
  },
  {
    title: '负偏差值',
    dataIndex: 'negativeDeviation',
    width: '130px',
  },
  {
    title: '标准值',
    dataIndex: 'standardValue',
    width: '130px',
  },
  {
    title: '正偏差值',
    dataIndex: 'positiveDeviation',
    width: '130px',
  },
  {
    title: '测量值',
    dataIndex: 'action',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  extends: new BaseEditPage(),
  components: {
    STable,
    BaseInfo,
    // BasePrintButton
  },
  data() {
    this.columns = columns
    return {
      loading: false, // 加载控件
      editModel: 0, // 操作状态 查看：2；编辑：1
      id: '', // 业务id
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.loading = true
        return table
          .getDetail({
            id: this.id,
          })
          .then((res) => {
            this.loading = false
            let data = { data: res.data.checkItem } // 列表对象
            this.form = res.data // 映射表单
            this.form.viewName = this.form.branchCompanyName + '/' + this.form.projectName
            return data
          })
          .catch((res) => {
            this.loading = false
          })
      },
      form: {
        viewName: ""
      }, // 表单
      rules: {
        measuringValue: [{ required: true, whitespace:true,message: '请输入测量值', trigger: 'change' }],
      }, // 表单校验规则
    }
  },
  computed: {
    // 表单列表
    formList() {
      return [
        {
          label: '点位类型名称',
          keyName: 'name',
        },
        {
          label: '测量点名称',
          keyName: 'measurePointName',
        },
        {
          label: '分项工程',
          keyName: 'subItem',
        },
        {
          label: '测量点位编号',
          keyName: 'measuringPointCode',
        },
        {
          label: '区域位置',
          keyName: 'checkArea',
        },
        {
          label: '测量人',
          keyName: 'measurePeople',
        },
        {
          label: '测量时间',
          keyName: 'measurementDate',
        },
        {
          label: '点位测量结果',
          keyName: 'result',
        },
        {
          label: '原因分析',
          type: 'BaseTextarea',
          keyName: 'reason',
          span: 24,
          isEdit: this.editModel == 1,
          // attrs: {
          //   type: 'textarea',
          // },
        },
      ]
    },
  },
  mounted() {
    this.$route.meta.title = ['实测实量编辑', '实测实量详情'][this.editModel - 1]
  },
  methods: {
    /**
     * 提交表单
     */
    handleSubmit() {
      let that = this
      let ruleForm = Array.isArray(that.$refs.ruleForm) ? that.$refs.ruleForm : [that.$refs.ruleForm] // 校验表单列表
      // 遍历校验
      ruleForm.forEach((item, index) => {
        item.validate((valid) => {
          // 当校验到最后一项且成功时提交表单
          if (valid && ruleForm.length == index + 1) {
            that.loading = true
            this.form.companyId = this.form.branchCompanyId
            if(this.form.companyId) {
              table.update(that.form)
                      .then((res) => {
                        that.loading = false
                        that.$message.success('编辑成功！')
                        that.$multiTab.close()
                      })
                      .catch((res) => {
                        that.loading = false
                        // that.$message.warning('编辑失败！')
                      })
            }

          }
        })
      })
    },
  },
}
</script>
<style lang="less" scoped>
#tableBox /deep/ .ant-form-item .ant-form-item-control-wrapper {
  width: auto;
}
</style>
